// 在这个模块中，封装组件之间共享的 hooks 函数
// hooks 函数的三个特点：
// 1. 函数名必须以 use 开头，例如 useRouter
// 2. hooks 函数只能在 .vue 组件的 <script setup></script> 中调用
// 3. hooks 函数可以互相嵌套调用
import { ref, watch } from 'vue'

// 封装并导出倒计时的 hooks 函数
export const useCountDown = (num = 60) => {
  // 倒计时剩余的秒数
  const count = ref(num)
  // 是否正在倒计时：false 表示没有倒计时、true 表示正在倒计时
  const isDown = ref(false)
  // 定时器的 id 编号
  let timerId = null

  // 开启倒计时的 start 函数
  const start = () => {
    if (isDown.value) return
    // 把 isDown 值设为 true 表示正在倒计时
    isDown.value = true
    timerId = setInterval(() => {
      count.value--
    }, 1000)
  }

  // 使用 watch 侦听 count 值的变化
  // watch(需要侦听的响应式数据, 回调函数)
  // watch(需要侦听的响应式数据, (newCount, oldCount) => {})
  watch(count, (newCount) => {
    if (newCount <= 0) {
      // 清除定时器
      clearInterval(timerId)
      // 把 count 值还原回去，为下次倒计时做准备
      count.value = num
      // 把 isDown 值还原为 false，为下次倒计时做准备
      isDown.value = false
    }
  })

  return {
    count,
    isDown,
    start
  }
}
